<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="主账号" prop="mainAccount">
        <el-input
            v-model="queryParams.mainAccount"
            placeholder="请输入主账号"
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button type="primary" icon="el-icon-download" @click="handleImport">数据导入</el-button>
      </el-form-item>
    </el-form>

    <!--    <el-row :gutter="10" class="mb8">-->
    <!--      <el-col :span="1.5">-->
    <!--        <el-button-->
    <!--            type="primary"-->
    <!--            plain-->
    <!--            icon="el-icon-plus"-->
    <!--            size="mini"-->
    <!--            @click="handleAdd"-->
    <!--            v-hasPermi="['system:dzcj:add']"-->
    <!--        >新增</el-button>-->
    <!--      </el-col>-->
    <!--      <el-col :span="1.5">-->
    <!--        <el-button-->
    <!--            type="success"-->
    <!--            plain-->
    <!--            icon="el-icon-edit"-->
    <!--            size="mini"-->
    <!--            :disabled="single"-->
    <!--            @click="handleUpdate"-->
    <!--            v-hasPermi="['system:dzcj:edit']"-->
    <!--        >修改</el-button>-->
    <!--      </el-col>-->
    <!--      <el-col :span="1.5">-->
    <!--        <el-button-->
    <!--            type="danger"-->
    <!--            plain-->
    <!--            icon="el-icon-delete"-->
    <!--            size="mini"-->
    <!--            :disabled="multiple"-->
    <!--            @click="handleDelete"-->
    <!--            v-hasPermi="['system:dzcj:remove']"-->
    <!--        >删除</el-button>-->
    <!--      </el-col>-->
    <!--      <el-col :span="1.5">-->
    <!--        <el-button-->
    <!--            type="warning"-->
    <!--            plain-->
    <!--            icon="el-icon-download"-->
    <!--            size="mini"-->
    <!--            @click="handleExport"-->
    <!--            v-hasPermi="['system:dzcj:export']"-->
    <!--        >导出</el-button>-->
    <!--      </el-col>-->
    <!--      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
    <!--    </el-row>-->

    <el-table  :data="dzcjList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="ID" align="center" prop="id" />
      <el-table-column label="主账号" align="center" prop="mainAccount" />
      <el-table-column label="交易金额" align="center" prop="transactionValue" />
      <el-table-column label="交易传输时间" align="center" prop="transmissionTime" />
      <el-table-column label="系统跟踪号" align="center" prop="trackingNo" />
      <el-table-column label="本地交易时间" align="center" prop="localTime" />
      <el-table-column label="本地交易日期" align="center" prop="localDay" />
      <el-table-column label="清算日期" align="center" prop="liquidationDate" />
      <el-table-column label="受理机构代码" align="center" prop="sljgNo" />
      <el-table-column label="发送机构代码" align="center" prop="fsjgNo" />
      <el-table-column label="检索参考号" align="center" prop="searchNo" />
      <el-table-column label="返回代码" align="center" prop="returnNo" />
      <el-table-column label="终端号" align="center" prop="terminalNo" />
      <el-table-column label="商户代码" align="center" prop="businessNo" />
      <el-table-column label="交易代码" align="center" prop="transactionCode" />
      <el-table-column label="操作员号" align="center" prop="operator" />
      <el-table-column label="承租人合同编号，17位" align="center" prop="contractId" />
      <el-table-column label="本次缴纳金额" align="center" prop="thisValue" />
      <el-table-column label="缴纳当年租金金额" align="center" prop="dnValue" />
      <el-table-column label="缴纳往年欠租金额" align="center" prop="wnValue" />
      <el-table-column label="缴纳预交租金金额" align="center" prop="yjValue" />
      <el-table-column label="数字签名" align="center" prop="signature" />
      <el-table-column label="到帐金额" align="center" prop="strInputValue" />
      <el-table-column label="系统订单号" align="center" prop="orderNo" />
      <el-table-column label="手续费" align="center" prop="strValue5" />
      <el-table-column label="来源" align="center" prop="from" :formatter="hanldefrom" />
      <!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
      <!--        <template slot-scope="scope">-->
      <!--          <el-button-->
      <!--              size="mini"-->
      <!--              type="text"-->
      <!--              icon="el-icon-edit"-->
      <!--              @click="handleUpdate(scope.row)"-->
      <!--              v-hasPermi="['system:dzcj:edit']"-->
      <!--          >修改</el-button>-->
      <!--          <el-button-->
      <!--              size="mini"-->
      <!--              type="text"-->
      <!--              icon="el-icon-delete"-->
      <!--              @click="handleDelete(scope.row)"-->
      <!--              v-hasPermi="['system:dzcj:remove']"-->
      <!--          >删除</el-button>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
    </el-table>

    <div class="publicpaginationview">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="queryParams.pageNum" background :page-sizes="[10, 20, 50, 100]"
                     :page-size="queryParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
                     small></el-pagination>
    </div>

    <!-- 添加或修改pos财务数据采集对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="主账号" prop="mainAccount">
          <el-input v-model="form.mainAccount" placeholder="请输入主账号" />
        </el-form-item>
        <el-form-item label="交易金额" prop="transactionValue">
          <el-input v-model="form.transactionValue" placeholder="请输入交易金额" />
        </el-form-item>
        <el-form-item label="交易传输时间" prop="transmissionTime">
          <el-input v-model="form.transmissionTime" placeholder="请输入交易传输时间" />
        </el-form-item>
        <el-form-item label="系统跟踪号" prop="trackingNo">
          <el-input v-model="form.trackingNo" placeholder="请输入系统跟踪号" />
        </el-form-item>
        <el-form-item label="本地交易时间" prop="localTime">
          <el-input v-model="form.localTime" placeholder="请输入本地交易时间" />
        </el-form-item>
        <el-form-item label="本地交易日期" prop="localDay">
          <el-input v-model="form.localDay" placeholder="请输入本地交易日期" />
        </el-form-item>
        <el-form-item label="清算日期" prop="liquidationDate">
          <el-input v-model="form.liquidationDate" placeholder="请输入清算日期" />
        </el-form-item>
        <el-form-item label="受理机构代码" prop="sljgNo">
          <el-input v-model="form.sljgNo" placeholder="请输入受理机构代码" />
        </el-form-item>
        <el-form-item label="发送机构代码" prop="fsjgNo">
          <el-input v-model="form.fsjgNo" placeholder="请输入发送机构代码" />
        </el-form-item>
        <el-form-item label="检索参考号" prop="searchNo">
          <el-input v-model="form.searchNo" placeholder="请输入检索参考号" />
        </el-form-item>
        <el-form-item label="返回代码" prop="returnNo">
          <el-input v-model="form.returnNo" placeholder="请输入返回代码" />
        </el-form-item>
        <el-form-item label="终端号" prop="terminalNo">
          <el-input v-model="form.terminalNo" placeholder="请输入终端号" />
        </el-form-item>
        <el-form-item label="商户代码" prop="businessNo">
          <el-input v-model="form.businessNo" placeholder="请输入商户代码" />
        </el-form-item>
        <el-form-item label="交易代码" prop="transactionCode">
          <el-input v-model="form.transactionCode" placeholder="请输入交易代码" />
        </el-form-item>
        <el-form-item label="操作员号" prop="operator">
          <el-input v-model="form.operator" placeholder="请输入操作员号" />
        </el-form-item>
        <el-form-item label="承租人合同编号，17位" prop="contractId">
          <el-input v-model="form.contractId" placeholder="请输入承租人合同编号，17位" />
        </el-form-item>
        <el-form-item label="本次缴纳金额" prop="thisValue">
          <el-input v-model="form.thisValue" placeholder="请输入本次缴纳金额" />
        </el-form-item>
        <el-form-item label="缴纳当年租金金额" prop="dnValue">
          <el-input v-model="form.dnValue" placeholder="请输入缴纳当年租金金额" />
        </el-form-item>
        <el-form-item label="缴纳往年欠租金额" prop="wnValue">
          <el-input v-model="form.wnValue" placeholder="请输入缴纳往年欠租金额" />
        </el-form-item>
        <el-form-item label="缴纳预交租金金额" prop="yjValue">
          <el-input v-model="form.yjValue" placeholder="请输入缴纳预交租金金额" />
        </el-form-item>
        <el-form-item label="数字签名" prop="signature">
          <el-input v-model="form.signature" placeholder="请输入数字签名" />
        </el-form-item>
        <el-form-item label="到帐金额" prop="strInputValue">
          <el-input v-model="form.strInputValue" placeholder="请输入到帐金额" />
        </el-form-item>
        <el-form-item label="系统订单号" prop="orderNo">
          <el-input v-model="form.orderNo" placeholder="请输入系统订单号" />
        </el-form-item>
        <el-form-item label="手续费" prop="strValue5">
          <el-input v-model="form.strValue5" placeholder="请输入手续费" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!--    <el-dialog title="数据导入" :visible.sync="open1" width="500px" append-to-body>-->
    <!--    </el-dialog>-->
    <!--导入-->
    <el-dialog  title="数据导入"
                :visible.sync="upload.open"
                width="400px"
                append-to-body>
      <el-upload
          ref="upload"
          :limit="1"
          accept=".txt"
          :headers="upload.headers"
          :action="upload.url"
          :disabled="upload.isUploading"
          :auto-upload="false"
          :on-change="filechange"
          :file-list="fileList"
          drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入.TXT格式文件。</span>
        </div>
      </el-upload>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { listDzcj, getDzcj, delDzcj, addDzcj, updateDzcj } from "@/api/caiwu/CwPosDzcj"
import {getToken} from "@/utils/auth";
import request from '@/utils/request'
import {
  addcwPosDzcj,
  delcwPosDzcj,
  getcwPosDzcj,
  listcwPosDzcj,
  submitfile,
  updatecwPosDzcj
} from "@/api/caiwu/CwPosDzcj";
import {Message} from "element-ui";
import {addcwWxDzcj, listcwWxDzcj, submitWXfile, updatecwWxDzcj} from "@/api/caiwu/CwWxDzcj";

export default {
  name: "ImportPOS",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // pos财务数据采集表格数据
      dzcjList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      open1: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        mainAccount: null,
        transactionValue: null,
        transmissionTime: null,
        trackingNo: null,
        localTime: null,
        localDay: null,
        liquidationDate: null,
        sljgNo: null,
        fsjgNo: null,
        searchNo: null,
        returnNo: null,
        terminalNo: null,
        businessNo: null,
        transactionCode: null,
        operator: null,
        contractId: null,
        thisValue: null,
        dnValue: null,
        wnValue: null,
        yjValue: null,
        signature: null,
        strInputValue: null,
        orderNo: null,
        strValue5: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url:"/mall-admin/cwPosDzcj/importData",
      },
      filedata:null,
      fileList: [], // 添加文件列表
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询pos财务数据采集列表 */
    getList() {
      this.loading = true
      listcwWxDzcj(this.queryParams).then(response => {
        this.dzcjList = response.data.list
        this.total = response.data.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        mainAccount: null,
        transactionValue: null,
        transmissionTime: null,
        trackingNo: null,
        localTime: null,
        localDay: null,
        liquidationDate: null,
        sljgNo: null,
        fsjgNo: null,
        searchNo: null,
        returnNo: null,
        terminalNo: null,
        businessNo: null,
        transactionCode: null,
        operator: null,
        contractId: null,
        thisValue: null,
        dnValue: null,
        wnValue: null,
        yjValue: null,
        signature: null,
        strInputValue: null,
        orderNo: null,
        strValue5: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      }
      this.resetForm("form")
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = "添加pos财务数据采集"
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getcwPosDzcj(id).then(response => {
        this.form = response.data
        this.open = true
        this.title = "修改pos财务数据采集"
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updatecwWxDzcj(this.form).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.open = false
              this.getList()
            })
          } else {
            addcwWxDzcj(this.form).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除pos财务数据采集编号为"' + ids + '"的数据项？').then(function() {
        return delcwPosDzcj(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess("删除成功")
      }).catch(() => {})
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/dzcj/export', {
        ...this.queryParams
      }, `dzcj_${new Date().getTime()}.xlsx`)
    },
    handleSizeChange(val) {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    /** 导入按钮操作 */
    handleImport () {
      this.upload.title = "导入";
      this.upload.open = true;
    },
    // 文件上传成功处理
    handleFileSuccess (response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    // 文件上传中处理
    handleFileUploadProgress (event, file, fileList) {
      this.upload.isUploading = true;
    },
    submitFileForm() {
      if (!this.filedata) {
        this.$modal.msgWarning("请先选择文件");
        return;
      }

      // 正确的 FormData 创建方式
      let fd = new FormData();
      // 注意：el-upload 的文件对象在 raw 属性中
      fd.append('file', this.filedata.raw);

      console.log("上传文件:", this.filedata);

      // 显示上传中状态
      this.upload.isUploading = true;

      submitWXfile(fd).then(res => {
        this.upload.isUploading = false;
        this.upload.open = false;
        Message({
          message:  '导入成功!',
          type: "success",
          duration: 3 * 1000,
        });
        this.getList(); // 刷新列表
        this.$refs.upload.clearFiles(); // 清空已上传文件列表
      }).catch(error => {
        this.upload.isUploading = false;
        Message({
          message:  '导入失败!',
          type: "error",
          duration: 3 * 1000,
        });
        console.error("导入错误:", error);
      });
    },

// 优化 filechange 方法
    filechange(file, fileList) {
      console.log("文件选择变化:", file);
      if (fileList.length > 0) {
        this.filedata = fileList[0]; // 保存最新的文件对象
      } else {
        this.filedata = null;
      }
    },
    hanldefrom(row){
      if(row.from==1){
       return   "微信"
      }
      if(row.from==2){
        return  "公众号"
      }
    },
  }
}
</script>
